<template>
  <div>
    <el-form
      :inline="true"
      :model="dataForm"
      @keyup.enter.native="getDataList()"
    >
      <el-form-item prop="startTime">
        <el-date-picker
          v-model="dataForm.startTime"
          type="datetime"
          value-format="timestamp"
          placeholder="开始时间"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item prop="endTime">
        <el-date-picker
          v-model="dataForm.endTime"
          type="datetime"
          value-format="timestamp"
          placeholder="完成时间"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getDataList()">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button @click="exportExcel">excel导出</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="dataList" v-loading="dataListLoading">
      <el-table-column type="index" width="100"> </el-table-column>
      <el-table-column prop="repairmanName" label="员工姓名"></el-table-column>
      <el-table-column prop="maintenanceFrequency" label="维修次数">
      </el-table-column>
      <el-table-column prop="serviceQuality" label="评分">
        <template slot-scope="scope">
          <el-rate
            v-model="scope.row.serviceQuality * 0.05"
            disabled
            :colors="['#99A9BF', '#F7BA2A', '#FF9900']"
            show-score
            text-color="#ff9900"
            score-template="{value}"
          >
          </el-rate>
        </template>
      </el-table-column>

      <el-table-column fixed="right" align="center" width="150" label="操作">
        <template slot-scope="scope">
          <el-button
            v-if="isAuth('feature:repair:update')"
            type="text"
            size="small"
            @click="showDetail(scope.row)"
            >详情</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataForm: {},
      dataListSelections: [],
      dataList: [],
      dataListLoading: false,
      // 分页
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0
    }
  },
  methods: {
    getDataList() {
      this.$http({
        url: this.$http.adornUrl('sys/maintenance/data/getRepairmanList'),
        method: 'post',
        params: {
          page: this.pageIndex,
          size: this.pageSize
        },
        data: this.$http.adornData(this.dataForm)
      }).then(({ data }) => {
        this.dataList = data.data.list
        this.totalPage = data.data.total
      })
    },
    exportExcel() {
      this.$http({
        url: this.$http.adornUrl('sys/maintenance/data/exportExcel'),
        method: 'post',
        data: this.dataForm,
        responseType: 'blob'
      }).then(({ data }) => {
        const link = document.createElement('a')
        let blob = new Blob([data], { type: 'application/vnd.ms-excel' })
        link.style.display = 'none'
        link.href = URL.createObjectURL(blob)
        link.setAttribute('download', '维修数据信息表')
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      })
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val
      this.getDataList()
    },
    // 详细信息
    showDetail(res) {
      this.$emit('getRepairman', res)
    }
  },
  created() {
    this.getDataList()
  }
}
</script>

<style></style>
